import type { VNode } from 'vue'
import { isClient } from '@vueuse/core'
import { guid } from 'fetm-utils'
import { createVNode, render } from 'vue'
import { withInstall } from '../../helpers/installer'
import { VideoPlayerViewer } from '../VideoPlayerViewer'
import VideoPlayer from './src/VideoPlayer.vue'

export { type VideoPlayerProps } from './src/helpers'

const VideoPlayerInstaller = withInstall(VideoPlayer)
export { VideoPlayer, VideoPlayerInstaller }

let instance: VNode | null = null

export function createVideoViewer(options: {
  url: string
  type?: 'mp4' | 'flv' | 'hls'
  poster?: string
  show?: boolean
}) {
  if (!isClient)
    return
  const { url, poster, type } = options

  const propsData: Partial<{
    url: string
    type?: 'mp4' | 'flv' | 'hls'
    poster?: string
    show?: boolean
    id?: string
  }> = {}
  const container = document.createElement('div')
  const id = `video_${guid()}`
  container.id = id
  propsData.url = url
  propsData.poster = poster
  propsData.show = true
  propsData.id = id
  propsData.type = type

  document.body.appendChild(container)
  instance = createVNode(VideoPlayerViewer, propsData)
  render(instance, container)
}
